<script setup>
	import { ref } from 'vue';

	import people from './assets/people.json'
	var person = ref(people);
	let data;  
	let list;
	let datas;
	

	function changePerson(curPerson){
		switch (curPerson){
			case 'buddy':  
				data = require('./assets/data-buddy.json');  
				break;  
			case 'mom':  
				data = require('./assets/data-mom.json');  
				break;   
			case 'girlfriend': 
				data = require('./assets/data-girlfriend.json');  
				break;  
			default: 
				console.log("error");
				break;
		}
		list = ref(data);
		datas = ref('');
	}
	
	changePerson(person.value[0]["name"]);

	function selPerson(index){
		for(var i=0; i<person.value.length; i++){
			if(i!=index){
				person.value[i]["isSel"] = false;
			}else{
				person.value[i]["isSel"] = true;
				var curPerson = person.value[i]["name"];
				changePerson(curPerson);
			}
		}
	}

	function add(){
		if(datas.value != ''){
			var sendTime = new Date();
			var info = {
				isMe: true,
				mess: datas.value,
				time: sendTime
			};
			list.value.push(info);
			datas.value = '';
		}
	}

	
</script>

<template>
	<body>
		<div class="main">
			<div class="top">
				<div class="l">CHAT</div>
				<button class="r">登录</button>
			</div>
			<div class="bottom">
				<div class="left">
					<div v-for="(p, index) in person" :key="p.name" class="person">
						<button :class="[p.isSel ? 'sel':'notSel']" @click="selPerson(index)">{{ p.name }}</button>
					</div>
				</div>
				<div class="right">
					<div class="upper">
						<div v-for="item in list" :key="item.mess" class="oneMess">
							<div :class="[item.isMe ? 'me':'you']">{{ item.mess }}</div>
							<div :class="[item.isMe ? 'mytime':'urtime']">{{ item.time }}</div>
						</div>
					</div>
					<div class="lower">
						<textarea v-model="datas" name="area" id="area" cols="30" rows="3"></textarea>
						<button @click="add" class="send">发送</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</template>

<style scoped>
body{
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.main{
	width: 100%;
	height: 100vh;
}

@media(max-width: 550px){
	body{
		font-size: 20px;
	}
	.l, .r{
		font-size: 130%;
	}
	.left{
		display: none;
	}
	.right{
		width: 100%;
	}
}

@media(min-width: 550px){
	body{
		font-size: 40px;
	}
	.l, .r{
		font-size: 80%;
	}
	.left{
		display: block;
	}
	.right{
		width: 70%;
	}
	.lower{
		font-size: 50%;
	}
}

.top{
	width: 100%;
	height: 10%;
	background-color: rgb(26, 112, 174);
	display: flex;
	justify-content: space-between;
	color: white;
	align-items: center;
	min-height: 60px;
}

.bottom{
	width: 100%;
	height: 90%;
	display: flex;
}

.l{
	width: auto;
	height: auto;
	margin-left: 10%;
	font-weight: 600;
}

.r{
	width: auto;
	height: auto;
	overflow: hidden;
	background-color: rgb(254, 247, 236);
	margin-right: 10%;
	color: rgb(21, 63, 83);
	border: 1px solid lightgray;
}

.left{
	width: 30%;
	height: 100%;
	border-right: 1px solid gray;
	background-color: rgb(235, 244, 243);
	overflow-y: auto;
}

.person{
	width: 90%;
	height: auto;
	border-bottom: 1px solid lightgrey;
	margin-left: auto;
	margin-right: auto;
}

.sel{
	width: 100%;
	height: 100%;
	text-align: left;
	font-size: 60%;
	border: 0;
	background-color: transparent;
	color: black;
	margin-bottom: 5%;
}

.notSel{
	width: 100%;
	height: 100%;
	text-align: left;
	font-size: 60%;
	border: 0;
	background-color: transparent;
	color: grey;
	margin-bottom: 5%;
}

.right{
	height: 100%;
}

.upper{
	width: 100%;
	height: 80%;
	background-color: rgb(254, 247, 236);
	display: block;
	overflow-y: auto;
}

.oneMess{
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	border-bottom: 1px solid lightgray;
}

.you{
	width: auto;
	height: auto;
	padding-top: 2%;
	display: flex;
	justify-content: left;
}

.me{
	width: auto;
	height: auto;
	padding-top: 2%;
	display: flex;
	justify-content: right;
}

.urtime{
	color: rgb(140, 140, 140);
	font-size: 50%;
	display: flex;
	justify-content: left;
	margin-bottom: 1%;
}

.mytime{
	color: rgb(140, 140, 140);
	font-size: 50%;
	display: flex;
	justify-content: right;
	margin-bottom: 1%;
}

.lower{
	width: 100%;
	height: 20%;
	display: flex;
}

.send{
	width: 15%;
	height: 100%;
	background-color: rgb(26, 112, 174);
	color: rgb(254, 247, 236);
	font-size: 150%;
}

#area{
	width: 85%;
	height: 100%;
	resize: none;
	border: 0;
	border-top: 1px solid gray;
	font-size: 200%;
	background-color: rgb(242, 234, 225);
}
</style>
